<!-- 表单 -->
<template>
  <el-select v-model="selectedValue" placeholder="全部" @change="handleSelectChange">
    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
  </el-select>
</template>

<script lang="ts" setup>
import { defineProps, defineEmits, ref, watch } from 'vue'

interface Option {
  value: string | number
  label: string
}

const props = defineProps<{
  modelValue: string | number
  options: Option[]
}>()

const emit = defineEmits(['update:modelValue'])

const selectedValue = ref(props.modelValue)

watch(
  () => props.modelValue,
  (newValue) => {
    selectedValue.value = newValue
  },
)

const handleSelectChange = (value: string | number) => {
  emit('update:modelValue', value)
}
</script>
